In diesem CSS-Tutorial lernen wir, wie wir mit Hilfe von Google Fonts oder auch lokal gespeicherten Fonts HTML Schriften einbindeen bzw. die Schrift 盲ndern k枚nnen.

Grunds盲tzlich gibt es in CSS einen recht einfachen Befehl, der die Schriftart eines HTML-Elements festlegt: font-family.

Im Quellcode sieht das Ganze dann in etwa so aus:

Es gibt hier eine Liste an Standard-Schriften, die man standardm盲脽ig verwenden kann und von den meisten Browsern unterst眉tzt werden.

Was aber, wenn ein Browser die angegebene Schrift nicht unterst眉tzt?

Das bringt uns zu den Fallback-Schriften.

Wenn der Browser die eigentlich angegebene Schrift nicht eingebaut hat, muss er stattdessen eine andere verwenden.

Er wird sich bem眉hen, eine zu finden, die m枚glichst 盲hnlich ist.

Oft funktioniert das ganz gut. Manchmal aber auch gar nicht.

Deshalb kann man dem Browser mit Hilfe der Fallback-Schriften sagen, was sozusagen die zweitbeste Wahl ist.

Und das funktioniert so:

Die erste Schrift in der Liste ist jeweils diejenige, die man eigentlich haben will. Dann folgt sozusagen die 2. Wahl, dann die 3. Wahl, usw.

Am Ende folgt im Regelfall eine verallgemeinerte Kategorie von Schriften. Hier eine kleine Auswahl:

Da sich z.B. sans-serif-Schriften untereinander mehr 盲hneln als fantasy-Schriften, k枚nnen wir davon ausgehen, dass diese sich zumindest in etwa 盲hnlich sein werden.

Was aber, wenn wir eine ganz bestimmte Schrift auf unserer Website verwenden wollen?

Dann haben wir u.A. zwei M枚glichkeiten:

Beginnen wir mit den Google Fonts.

Bevor wir eine Schrift von Google Fonts einf眉gen k枚nnen, m眉ssen wir sie erst einmal ausw盲hlen.

Geh dazu auf diesen Link, der dich zu Google fonts f眉hrt, oder gib einfach „Google fonts“ in die Suchmaschine deiner Wahl ein.

Du solltest nun eine Liste verf眉gbarer Schriften vor dir haben:

Dort, wo oben in der Mitte „type something“ steht, kannst du einen Text eingeben, der dann in allen verf眉gbaren Schriften angezeigt wird.

Das solltest du tun, und darauf achten, dass darin Zahlen und – wenn du z.B. eine deutsche Website erstellen willst – auf jeden Fall auch Umlaute usw. vorkommen. Manche Schriften unterst眉tzen z.B. kein 脛, das musst du mitbedenken.

Wenn du den Text unter „type something“ entsprechend 盲nderst, kannst du gleich bei jeder Schrift in der Auswahl 眉berpr眉fen, ob sie auch mit Umlauten etc. funktioniert.

Wenn du dann eine Schrift f眉r dich gefunden hast, einfach darauf klicken.

Im n盲chsten Schritt kannst du noch Varianten der Schrift (z.B. fetter oder kursiver) w盲hlen:

Ein guter Standard-Wert f眉r die „Fettigkeit“ einer Schrift w盲re in etwa 300-500. Alles ab 700 wird meist schon seeeehr fett.

Klicke auf „Select this style“, um die Variante auszuw盲hlen, die dir gef盲llt.

Dann sollte sich rechts ein kleiner Bereich 枚ffnen, wo du alle ausgew盲hlten Schriften aufgelistet findest. Falls das nicht passiert, musst du dazu noch auf den im Bild unten mit dem orangen Pfeil gekennzeichneten Button klicken, damit die richtige Ansicht aufklappt:

Und nun sind wir schon fast fertig.

Google ist so nett, uns im Grunde schon alles vorzubereiten, was wir noch brauchen.

Nun gibt es zwei M枚glichkeiten, wie wir weitermachen k枚nnen:

Da unser CSS-Code in einer einzigen .css-Datei eingef眉gt werden kann, die dann von allen HTML-Unterseiten aufgerufen wird, ist die 2. Variante in den meisten F盲llen die einfacherere.

Hier trotzdem beide ganz kurz:

Hier ein Beispiel f眉r die eingef眉gte Google Font-Schriftart „Montserrat“:

Relevant sind dabei nur die 3 -Tags im unteren -Bereich.

Die gleiche Schriftart k枚nnen wir auch 眉ber unsere .css-Datei einf眉gen:

Das wars.

Beziehungsweise fast. Wir m眉ssen dem Browser ja noch sagen, welche HTML-Elemente die Schrift verwenden sollen.

Dies machen wir genau gleich wie mit den schon vordefinierten Schriften wie Arial. Wir setzen den Namen der zus盲tzlichen Schrift einfach ein den font-family-Befehl ein:

Und schon ist unsere h1-脺berschrift abge盲ndert worden und verwendet die ver盲nderte Schriftart!

Google Fonts zu verwenden hat einige Vorteile, aber auch einige potentielle Nachteile.

Ein Vorteil ist, dass die Schriftarten 眉ber Google Fonts 眉ber ein sogenanntes CDN geladen werden. CDN steht dabei f眉r Content Delivery Network, und bezeichnet die Technik, die selbe Datei auf mehreren Servern weltweit verf眉gbar zu stellen. Wenn jetzt ein Webseiten-Besucher aus 脰sterreich ist, verbindet ihn das CDN z.B. nach Deutschland. Ein anderer Webseiten-Besucher aus Indien wird vielleicht auf einen Server nach Indien oder China geleitet, usw.

Es geht dabei darum, die Wege m枚glichst kurz zu halten. Das hat positive Auswirkungen auf die Lade-Geschwindigkeit.

Ist eine Schrift-Datei in einer Website verwendet worden und musste vom Browser erst heruntergeladen werden, so wird diese oft im Browser-Cache (gewisserma脽en das „Kurzzeit-Ged盲chtnis“ des Browsers) gespeichert. Wird nun eine andere Website besucht, die die gleiche Schriftart verwendet, so kann die Schriftart gleich aus diesem „Kurzzeitged盲chtnis“, dem Cache, geladen werden.

Diese Website hier verwendet z.B. die Schriftart „Alegreya“. Wenn du nach dem Besuch der relativeMeister-Website eine andere aufrufst, die ebenso die Font „Alegreya“ benutzt, so ist die Chance gro脽, dass diese Seite rascher l盲dt.

Je mehr Websites Google Fonts benutzen, desto schneller laden sie damit alle.

Wenn eine Website die Google Fonts aufruft, kann Google anhand der Aufrufe – wieder mal – ein wenig besser nachverfolgen, wie Webseiten-Besucher sich durchs Internet bewegen. Google stellt viele hilfreiche Dienste zur Verf眉gung, aber profitiert meist auch selbst dabei. Das muss dir immer klar sein, wenn du diese M枚glichkeiten nutzt.

Weil du mit der Verwendung von Google Fonts damit dem Unternehmen Google Informationen 眉ber deine Webseiten-Besucher mitteilst, musst du darauf achten, das auch entsprechend in deinen Datenschutz-Bestimmungen usw. zu erw盲hnen bzw. lokale Gesetze was solche Vorgangsweisen betrifft beachten.

Willst du das alles vermeiden, kannst du Schriften auch lokal (auf dem Webserver) speichern und einf眉gen.

Damit du eine Schriftart lokal einf眉gen kannst, brauchst du als erstes die Schriftart als Schriftart-Datei.

Es gibt dabei verschiedene Formate, wobei das hier die h盲ufigsten sind:

Die .woff2 bzw. .woff sind die „moderneren“ Formate (.woff2 ist die Weiterentwicklung von .woff), wobei auch z.B. .ttf noch verbreitet ist.

Du brauchst also eine .woff2-Datei deiner Schriftart. Wenn du z.B. „nur“ eine .ttf-Datei hast, kannst du sie mit dem sehr n眉tzlichen Konverter von FontSquirrel in alle anderen Formate (inklusive .woff2) umwandeln lassen.

Die Datei packst du dann an den selben Ort, an dem sich auch deine style.css befindet.

Als n盲chstes musst du die Schriftart mit font-face nutzbar machen:

In diesem Fall haben wir 2 Versionen der Schriftart angegeben. Falls n盲mlich der Browser des Webseiten-Besuchers das .woff2-Format noch nicht unterst眉tzt, kann er stattdessen das .woff-Format verwenden.

In den meisten F盲llen wird das aber mittlerweile nicht mehr notwendig sein, und du kommst mit dieser Version aus:

Das packst du an den Beginn deiner .css-Datei, z.B. deiner style.css – nun kannst du mit dem CSS-Befehl font-family genau wie bei den Google Fonts vorhin deinen HTML-Elementen die neue Schrift verpassen.

Der Vorteil dieser Methode ist, dass du dir den ganzen Aufwand mit den Datenschutzbestimmungen ersparst. Du kannst sogar die einzelnen Google fonts als .ttf-Datei herunterladen und dann mit dem FontSquirrel-Konverter in .woff2 konvertieren.

Der Nachteil dieser Variante ist die m枚glicherweise etwas langsamere Ladegeschwindigkeit deiner Website.

Wie bei den Farben ist die Antwort auch hier sehr subjektiv. Aber es gibt einige Grundregeln:

Der Rest ist Erfahrung und ein St眉ck weit Geschmacks-Sache.

Neben der Schriftart gibt es nat眉rlich auch noch einige weitere Aspekte von Schriften, die f眉r unser Webdesign relevant sein k枚nnen.

Hier einige der wichtigsten als CSS-Befehle zum Schriften 盲ndern:

Im Einzelnen:

Mit diesem CSS-Befehl kann die Schriftart eingestellt werden – vorausgesetzt der Browser unterst眉tzt sie schon, oder sie wird 眉ber Google Fonts bzw. eine lokale Schrift-Datei eingebunden.

Die Farbe der Schrift festlegen. Mehr zu Farben findest du im CSS-Tutorial 眉ber Farben in CSS und HTML.

Die Schriftgr枚脽e einstellen. Empfohlen wird f眉r Haupt-Texte eine Mindestgr枚脽e von 18px oder mehr – einfach weil gr枚脽erer Text besser lesbar ist.

Die Lesbarkeit eines Textes wird auch durch die Zeilenh枚he bestimmt.

Innerhalb der Zeilenh枚he wird der Text normalerweise vertikal zentriert ausgerichtet – das hei脽t, von oben nach unten ist innerhalb der Zeilenh枚he der Text mittig angesiedelt.

Je gr枚脽er die line-height eines Textes, desto mehr Abstand findet sich zwischen den Zeilen.

Bei einer Schriftgr枚脽e von 20px f眉hlt sich beispielsweise eine Zeilenh枚he ab ca. 30px f眉r die meisten Menschen gut zum Lesen an.

Hier kann einfach ein Wort wie „bold“ (=fett) als Wert eingesetzt werden, oder aber eine Zahl. 300 ist eher d眉nn, 500-600 so durchschnittlich dick, und 900 z.B. f眉hrt schon zu relativ dicken Buchstaben.

Mit text-align kann bestimmt werden, ob ein Text linksb眉ndig, rechtsb眉ndig oder zentriert ausgerichtet wird (left, right oder center als Wert).

Der Befehl funktioniert 眉brigens auch f眉r viele andere Inhalte – so k枚nnen z.B. Bilder auch meist mit dem Befehl zentriert werden, wenn er auf das Eltern-Element angewandt wird.

Es gibt zwar theoretisch auch den Wert „justify“ f眉r Blocksatz, aber er ist nicht empfohlen. Meist schaut das Ergebnis nicht allzu sch枚n aus.

Der CSS-Befehl text-indent erm枚glicht es, einen Absatz in der ersten Zeile anders starten zu lassen als in den Folge-Zeilen.

Ein text-indent von 20px l盲sst beispielsweise alle Zeilen au脽er die erste um 20px weiter rechts starten.

Setzen wir ein Minus vor unseren Wert, dreht sich das Ganze um. Die erste Zeile startet etwas weiter links als die anderen.

Mit dem CSS-Befehl text-decoration k枚nnen Verzierungen eines Textes erreicht werden, wie z.B. Unterstreichungen.

Dieser Befehl ist vor allem auch n眉tzlich, um die standardm盲脽ig voreingestellten Unterstreichungen von Links zu entfernen.

Dies geht so:

Mit dem CSS-Befehl font-style k枚nnen Texte z.B. kursiv gestellt werden.

Der Befehl f眉r kursiv hei脽t im Englischen 眉brigens „italic“ – vermutlich weil diese Art der Schrift erstmals in Italien gebr盲uchlich war.

Wir erreichen eine kursive Schrift so:

Was, wenn wir einen Text haben, bei dem wir z.B. alle Buchstaben in Gro脽buchstaben haben wollen?

Auch das erm枚glicht uns CSS sehr einfach mit dem CSS-Befehl text-transform:

Au脽erdem gibt es z.B. noch „lowercase“ (nur Kleinbuchstaben) und „capitalize“ (erster Buchstabe gro脽).